<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象之烟花</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 700px;
            height: 500px;
            border: 1px solid red;
            background: #000;
            margin: 50px auto;
            position: relative;
        }
        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
    
</head>
<body>
    <div id="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        /* 
        
            设计分析：
                * 点击盒子
                * 生成烟花
                * 烟花移动
                * 隐藏

        */

        // 构造函数
        function Firework(elem_selector){
            // 获取元素
            this.box = document.querySelector(elem_selector);
            
            // 调用方法
            this.bindEvent();
        }

        // 原型对象
        // 事件绑定
        Firework.prototype.bindEvent = function(){
            let self = this;
            
            // 点击创建烟花并定位
            self.box.onclick = function(e){
                let fw = self.createFw();
                fw.style.left = e.offsetX + 'px';
                // 运动到目标地点后移除
                $(fw).animate({
                    top:e.offsetY
                },function(){
                    fw.remove();
                })
            }
            
        }
        // 创建烟花
        Firework.prototype.createFw = function(){
            let self = this;

            // 插入盒子
            let span = document.createElement('div');
            self.box.appendChild(span);

            // 样式设置
            span.className = 'ball';
            // 16进制转10进制再转16进制
            span.style.background = '#' + Math.round(parseInt('ffffff',16) * Math.random()).toString(16).padStart(6,'0');

            // 返回添加元素
            return span
        }


        // 实例对象
        let fw = new Firework('#box');
        
    </script>
</body>
</html>